<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="提现" titleTintColor="#fff">
			<text slot="back" class="iconfont">&#xe63d;</text>
			<text slot="string" @click="withdrawList()" class="nav-right-radius">提现纪录</text>
		</navigation>
		<view class="contain">
			<view class="no-card" v-if="empty(cardStr)">
				<image class="img-img" mode="aspectFit" src="/static/icon/bank_empty_icon.png"></image>
				<text class="no-tit">您还未绑定出款银行卡</text>
			</view>  
			<view class="bank-card " :class="[`${bankname(cardStr.bankcode)}`]" v-if="!empty(cardStr)">
				<view class="b-card-head">  
					<image class="img-img" mode="aspectFit" :src="cardStr.bankcode | bankcodeup('/static/icon/bankicon/','.png')"></image>
					<text>{{ cardStr.bankcode | bankname }}</text>
				</view>
				<view class="b-card-content">   
					<view class="b-c-bg"><image class="img-img" mode="aspectFit" :src="cardStr.bankcode | bankcodeup('/static/icon/bankicon/','_d.png')"></image></view>
					<view class="b-c-c-no">{{ cardStr.card }}</view>
					<view class="b-c-c-name">持卡人:{{ cardStr.username|  hideName }}</view>
				</view>
			</view>

			<view class="card-select" @click="selectBankCard()">
				<text class="iconfont">&#xe656;</text>
				<view class="c-tit">银行卡列表</view>
			</view>
			<view class="tit">提款金额</view>
			<view class="money-input">
				<view class="icon"><text class="iconfont">&#xe66b;</text></view>
				<view class="m-input"><input v-model="money" class="m-input-i" placeholder="请输入提现金额" /></view>
				<view class="m-btn" @click="onWithdraw()">全部</view>
			</view>
			<view class="m-tit">可提款金额{{ decimal(balanceNum) }}元(最低提现{{ decimal(minoutcash) }}元)</view>
			<view class="withdraw-btn" @click="submitWithdraw()">提交申请</view>
		</view>

		<uni-popup ref="popup" type="center" :maskClick="false">
			<AlertInput title="输入支付密码">
				<input slot="alert-input" v-model="psw" password="true" class="alert-input" placeholder="输入提现密码" />
				<view slot="btn-cancel" @click="cancelApply()">取消</view>
				<view slot="btn-submit" @click="applySubmit()">确认</view>
			</AlertInput>
		</uni-popup>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
import AlertInput from '@/components/alert-input.vue';
import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
export default {
	components: { Tabbar, navigation, AlertInput, uniPopup },
	data() {
		return {
			money: '', //输入提现的金额
			cardStr: {}, //选中的银行卡信息
			balanceNum: '0.00', //总余额
			minoutcash: '0.00', //最小提现余额
			psw: '', //支付密码
		};
	},
	onLoad() {
		this.getBlanceNet();
		this.initEvent();
	},
	methods: {
		initEvent() {
			let that = this;
			uni.$on('getCardData', function(item) {
				that.cardStr = item;
			});
		},
		getBlanceNet() {
			let that = this;
			Net.ayiHttp(
				URL.USER_SHOWACCTOUT,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.balanceNum = data.balance;
						that.minoutcash = data.minoutcash;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 银行卡的选择
		 */
		selectBankCard() {
			let param = '{"s":"1"}';
			this.navigateToSigleUrl('/pages/my/banklist/banklist?p=' + encodeURIComponent(Tools.paramAESEncrypt(param)));
		},
		/**
		 * 全部金额数据
		 */
		onWithdraw() {
			this.money = parseInt(this.balanceNum);
		},
		/**
		 * 提交申请
		 */
		submitWithdraw() {
			if (Tools.isEmpty(this.cardStr)) {
				VueTools.toastNo('请选择银行卡');
				return;
			}
			if (Tools.keepTwoDecimal(this.money) < this.minoutcash) {
				VueTools.toastNo('提款金额不能低于最低提现金额');
				return;
			}
			this.$refs.popup.open();
		},
		/**
		 * 取消申请的对话框
		 */
		cancelApply() {
			this.$refs.popup.close();
		},
		/**
		 * 确认申请
		 */
		applySubmit() {
			if (Tools.isEmpty(this.psw)) {
				VueTools.toastNo('请输入密码');
				return;
			}
			uni.showLoading({
				title: '申请中...'
			});
			let that = this;
			Net.ayiHttp(
				URL.USER_USEROUTCASH,
				'{"bank_id":"' + that.cardStr.bank_id + '","out":\{"cash":"' + Tools.keepTwoDecimal(that.money) + '","password2":"' + that.psw + '"}\}',
				function(res) {
					uni.hideLoading();
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						VueTools.toastNo(res.message);
						if (data.status == 'success') {
							that.goBackPage();
							that.cancelApply();
							that.storeWithdraw();
						}
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					uni.hideLoading();
					console.log('error:', err);
				}
			);
		},
		/**
		 * 更新缓存的余额值
		 */
		storeWithdraw() {
			Net.ayiHttp(
				URL.USER_FINDCREDIT,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						VueTools.setStorageSync(Config.MONEY_KEY, data);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 近六个月的提现记录
		 */
		withdrawList() {
			let param = '{"name":"2","type":"2"}';
			this.navigateToSigleUrl('/pages/recharge/transaction/transaction?p=' + encodeURIComponent(Tools.paramAESEncrypt(param)));
		},
		bankname(bankCode){
			return Tools.getBankNameByCode(bankCode);
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.alert-input {
	height: 34rpx;
	padding: 12rpx;
	border: 1px solid #ababab;
	font-size: 26rpx;
	border-radius: 8rpx;
	color: #000;
	margin-bottom: 20rpx;
}
.contain {
	padding: 20rpx;
}
.no-card {
	border: 1px solid #c9c9c9;
	background: #fff;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 260rpx;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	.img-img {
		height: 160rpx;
		margin: 20rpx;
	}
	.no-tit {
		font-size: 28rpx;
		color: #565656;
	}
}
.bank-card {
	margin-bottom: 20rpx;
	height: 320rpx;
	border-radius: 16rpx;
	position: relative;
	.b-card-head {
		height: 120rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 34rpx;
		color: #fff;
		.img-img {
			height: 120rpx;
			width: 120rpx;
			opacity: 0.7;
		}
	}
	.b-card-content {
		padding: 60rpx 20rpx 0rpx 20rpx;
		position: relative;
		color: #fff;
		.b-c-bg {
			position: absolute;
			width: 200rpx;
			height: 180rpx;
			bottom: -20rpx;
			right: 0rpx;
			opacity: 0.3;
			.img-img {
				width: 100%;
				height: 100%;
			}
		}
		.b-c-c-no {
			margin-bottom: 2px;
			font-size: 14px;
			text-align: left;
		}
		.b-c-c-name {
			margin-bottom: 2px;
			font-size: 14px;
			text-align: right;
		}
	}
}
.card-select {
	height: 80rpx;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	.iconfont {
		font-size: 60rpx;
		color: #f55060;
		font-weight: bold;
		padding-top: 20rpx;
	}
	.c-tit {
		font-size: 28rpx;
		color: #666;
	}
}
.tit {
	color: #555555;
	font-size: 34rpx;
	border-bottom: 1px solid #e8e9ec;
	margin-top: 60rpx;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
}
.money-input {
	display: flex;
	flex-direction: row;
	justify-content: center;
	height: 80rpx;
	align-items: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	.icon {
		flex: 40;
		text-align: center;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
	}
	.m-input {
		flex: 250;
		font-size: 24rpx;
	}
	.m-btn {
		flex: 40;
		color: #f55060;
		font-weight: bold;
		font-size: 24rpx;
		text-align: center;
	}
}
.m-tit {
	font-size: 28rpx;
	color: #555;
	margin-top: 8rpx;
}
.withdraw-btn {
	margin-top: 200rpx;
	background: linear-gradient(to right, #fa5863, #ef425e);
	height: 80rpx;
	border-radius: 20rpx;
	color: #fff;
	font-size: 34rpx;
	text-align: center;
	line-height: 80rpx;
}

.ICBC {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.ABC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.BCM {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.CCB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.CEB {
	background: linear-gradient(to right, #994abd, #641e7c);
}
.CMB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.BOC {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.CIB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.GDB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.PSBC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.CNCB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.SPDB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
.PAB {
	background: linear-gradient(to right, #eabd73, #eea800);
}
.HXB {
	background: linear-gradient(to right, #fd6e68, #fe5365);
}
.ADBC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.RCC {
	background: linear-gradient(to right, #33b8ab, #009183);
}
.CB {
	background: linear-gradient(to right, #3c83ca, #3762be);
}
</style>
